<template>
  <div class="register-container">
    <div class="register-wrapper">
      <div class="register-logo">
        <h1>高校职工就餐系统</h1>
        <p>便捷的校园餐饮服务平台</p>
      </div>
      
      <div class="register-form">
        <h2>用户注册</h2>
        <form @submit.prevent="handleRegister">
          <!-- 工号+姓名 -->
          <div class="form-row">
            <div class="form-group">
              <label for="employeeId">工号</label>
              <div class="input-wrapper">
                <svg class="input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                  <circle cx="8.5" cy="7" r="4"></circle>
                  <polyline points="17 11 19 13 23 9"></polyline>
                </svg>
                <input 
                  type="text" 
                  id="employeeId" 
                  v-model="registerForm.employeeId" 
                  placeholder="请输入工号"
                  required
                  autocomplete="off"
                />
              </div>
              <span v-if="errors.employeeId" class="error-msg">{{ errors.employeeId }}</span>
            </div>
            
            <div class="form-group">
              <label for="name">姓名</label>
              <div class="input-wrapper">
                <svg class="input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                  <circle cx="12" cy="7" r="4"></circle>
                </svg>
                <input 
                  type="text" 
                  id="name" 
                  v-model="registerForm.name" 
                  placeholder="请输入姓名"
                  required
                  autocomplete="off"
                />
              </div>
              <span v-if="errors.name" class="error-msg">{{ errors.name }}</span>
            </div>
          </div>

          <!-- 部门+职位 -->
          <div class="form-row">
            <div class="form-group">
              <label for="department">所属部门</label>
              <div class="input-wrapper">
                <svg class="input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
                  <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
                </svg>
                <input 
                  type="text" 
                  id="department" 
                  v-model="registerForm.department" 
                  placeholder="请输入所属部门"
                  required
                  autocomplete="off"
                />
              </div>
              <span v-if="errors.department" class="error-msg">{{ errors.department }}</span>
            </div>
            
            <div class="form-group">
              <label for="position">职位</label>
              <div class="input-wrapper">
                <svg class="input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>
                </svg>
                <input 
                  type="text" 
                  id="position" 
                  v-model="registerForm.position" 
                  placeholder="请输入职位"
                  required
                  autocomplete="off"
                />
              </div>
              <span v-if="errors.position" class="error-msg">{{ errors.position }}</span>
            </div>
          </div>

          <!-- 联系电话 -->
          <div class="form-group">
            <label for="phone">联系电话</label>
            <div class="input-wrapper">
              <svg class="input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
              </svg>
              <input 
                type="tel" 
                id="phone" 
                v-model="registerForm.phone" 
                placeholder="请输入联系电话"
                required
                autocomplete="off"
              />
            </div>
            <span v-if="errors.phone" class="error-msg">{{ errors.phone }}</span>
          </div>

          <!-- 邮箱 -->
          <div class="form-group">
            <label for="email">邮箱</label>
            <div class="input-wrapper">
              <svg class="input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                <polyline points="22,6 12,13 2,6"></polyline>
              </svg>
              <input 
                type="email" 
                id="email" 
                v-model="registerForm.email" 
                placeholder="请输入邮箱"
                required
                autocomplete="off"
              />
            </div>
            <span v-if="errors.email" class="error-msg">{{ errors.email }}</span>
          </div>

          <!-- 密码+确认密码 -->
          <div class="form-row">
            <div class="form-group">
              <label for="password">密码</label>
              <div class="input-wrapper">
                <svg class="input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                  <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                </svg>
                <input 
                  :type="showPassword ? 'text' : 'password'" 
                  id="password" 
                  v-model="registerForm.password" 
                  placeholder="请输入密码（至少6位）"
                  required
                  autocomplete="off"
                />
                <button 
                  type="button" 
                  class="toggle-pwd" 
                  @click="toggleShowPassword"
                  aria-label="显示/隐藏密码"
                >
                  {{ showPassword ? '🙈' : '👁️' }}
                </button>
              </div>
              <span v-if="errors.password" class="error-msg">{{ errors.password }}</span>
            </div>
            
            <div class="form-group">
              <label for="confirmPassword">确认密码</label>
              <div class="input-wrapper">
                <svg class="input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                  <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                </svg>
                <input 
                  :type="showPassword ? 'text' : 'password'" 
                  id="confirmPassword" 
                  v-model="registerForm.confirmPassword" 
                  placeholder="请再次输入密码"
                  required
                  autocomplete="off"
                />
              </div>
              <span v-if="errors.confirmPassword" class="error-msg">{{ errors.confirmPassword }}</span>
            </div>
          </div>

          <!-- 用户协议 -->
          <div class="form-group terms">
            <label class="terms-label">
              <input 
                type="checkbox" 
                v-model="agreeTerms" 
                required 
                class="terms-checkbox"
              />
              <span>我已阅读并同意<a href="#" class="terms-link">用户协议</a>和<a href="#" class="terms-link">隐私政策</a></span>
            </label>
          </div>

          <!-- 注册按钮 -->
          <button 
            type="submit" 
            class="register-btn" 
            :disabled="!isFormValid || isLoading"
          >
            <span v-if="isLoading">注册中...</span>
            <span v-else>立即注册</span>
          </button>

          <!-- 登录链接 -->
          <div class="login-link">
            已有账号？<a href="/login">立即登录</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, computed } from 'vue'
import { useRouter } from 'vue-router'

export default {
  name: 'RegisterPage',
  setup() {
    const router = useRouter()
    const isLoading = ref(false) // 注册加载状态
    const agreeTerms = ref(false) // 同意协议
    const showPassword = ref(false) // 显示/隐藏密码

    // 表单字段（与模板绑定一致）
    const registerForm = reactive({
      employeeId: '', // 工号
      name: '', // 姓名
      department: '', // 部门
      position: '', // 职位
      phone: '', // 电话
      email: '', // 邮箱
      password: '', // 密码
      confirmPassword: '' // 确认密码
    })

    // 表单验证逻辑
    const errors = computed(() => {
      const validationErrors = {}

      // 工号验证
      if (!registerForm.employeeId.trim()) {
        validationErrors.employeeId = '工号不能为空'
      } else if (registerForm.employeeId.length < 5) {
        validationErrors.employeeId = '工号至少5个字符'
      }

      // 姓名验证
      if (!registerForm.name.trim()) {
        validationErrors.name = '姓名不能为空'
      }

      // 部门验证
      if (!registerForm.department.trim()) {
        validationErrors.department = '所属部门不能为空'
      }

      // 职位验证
      if (!registerForm.position.trim()) {
        validationErrors.position = '职位不能为空'
      }

      // 电话验证（手机号正则）
      const phoneReg = /^1[3-9]\d{9}$/
      if (!registerForm.phone.trim()) {
        validationErrors.phone = '联系电话不能为空'
      } else if (!phoneReg.test(registerForm.phone)) {
        validationErrors.phone = '请输入有效的手机号'
      }

      // 邮箱验证
      const emailReg = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      if (!registerForm.email.trim()) {
        validationErrors.email = '邮箱不能为空'
      } else if (!emailReg.test(registerForm.email)) {
        validationErrors.email = '请输入有效的邮箱地址'
      }

      // 密码验证
      if (!registerForm.password) {
        validationErrors.password = '密码不能为空'
      } else if (registerForm.password.length < 6) {
        validationErrors.password = '密码至少6个字符'
      }

      // 确认密码验证
      if (!registerForm.confirmPassword) {
        validationErrors.confirmPassword = '请确认密码'
      } else if (registerForm.confirmPassword !== registerForm.password) {
        validationErrors.confirmPassword = '两次输入的密码不一致'
      }

      return validationErrors
    })

    // 表单是否有效（无错误+同意协议+所有字段已填）
    const isFormValid = computed(() => {
      return Object.keys(errors.value).length === 0 && agreeTerms.value
    })

    // 切换显示/隐藏密码
    const toggleShowPassword = () => {
      showPassword.value = !showPassword.value
    }

    // 注册提交
    const handleRegister = async () => {
      if (!isFormValid.value) return

      isLoading.value = true
      try {
        // 模拟注册请求（实际项目替换为真实接口）
        console.log('注册参数:', registerForm)
        
        // 模拟网络延迟
        await new Promise(resolve => setTimeout(resolve, 1500))
        
        // 注册成功，跳转登录页
        alert('注册成功！请前往登录')
        router.push('/login')
      } catch (error) {
        console.error('注册失败:', error)
        alert('注册失败，请稍后重试')
      } finally {
        isLoading.value = false
      }
    }

    return {
      registerForm,
      isLoading,
      agreeTerms,
      showPassword,
      errors,
      isFormValid,
      toggleShowPassword,
      handleRegister
    }
  }
}
</script>

<style scoped>
/* 容器样式 */
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 20px;
  box-sizing: border-box;
}

/* 卡片样式 */
.register-wrapper {
  width: 100%;
  max-width: 800px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* -logo样式 */
.register-logo {
  background: #2196f3;
  color: #fff;
  padding: 30px;
  text-align: center;
}

.register-logo h1 {
  font-size: 24px;
  margin: 0 0 10px;
  font-weight: 600;
}

.register-logo p {
  font-size: 15px;
  opacity: 0.9;
  margin: 0;
}

/* 表单区域 */
.register-form {
  padding: 30px;
  box-sizing: border-box;
}

.register-form h2 {
  text-align: center;
  color: #333;
  margin: 0 0 25px;
  font-size: 20px;
  font-weight: 600;
}

/* 行布局（两列） */
.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

/* 表单组 */
.form-group {
  flex: 1;
  margin-bottom: 20px;
  position: relative;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #666;
  font-size: 14px;
  font-weight: 500;
}

/* 输入框容器（图标+输入框） */
.input-wrapper {
  position: relative;
}

/* 输入框图标 */
.input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: #999;
}

/* 输入框样式 */
.form-group input {
  width: 100%;
  padding: 12px 12px 12px 42px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 15px;
  box-sizing: border-box;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.form-group input:focus {
  outline: none;
  border-color: #2196f3;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

/* 显示/隐藏密码按钮 */
.toggle-pwd {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 0 5px;
  color: #999;
  transition: color 0.3s;
}

.toggle-pwd:hover {
  color: #2196f3;
}

/* 错误提示 */
.error-msg {
  display: block;
  margin-top: 5px;
  color: #f44336;
  font-size: 13px;
  line-height: 1.4;
}

/* 用户协议 */
.terms {
  margin: 25px 0;
}

.terms-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #666;
  font-size: 13px;
}

.terms-checkbox {
  width: 15px;
  height: 15px;
  margin-right: 8px;
  accent-color: #2196f3;
}

.terms-link {
  color: #2196f3;
  text-decoration: none;
  margin: 0 3px;
}

.terms-link:hover {
  text-decoration: underline;
}

/* 注册按钮 */
.register-btn {
  width: 100%;
  padding: 13px;
  background: #2196f3;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s;
  box-sizing: border-box;
}

.register-btn:hover:not(:disabled) {
  background: #1976d2;
}

.register-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  opacity: 0.8;
}

/* 登录链接 */
.login-link {
  text-align: center;
  margin-top: 20px;
  color: #666;
  font-size: 14px;
}

.login-link a {
  color: #2196f3;
  text-decoration: none;
  margin-left: 5px;
}

.login-link a:hover {
  text-decoration: underline;
}

/* 响应式：小屏幕下两列变一列 */
@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
    gap: 0;
  }
  
  .register-form {
    padding: 20px;
  }
}
</style>